<template>
  <div class="app-wrapper">
    <div class="content">
      <div class="title">创建问题单</div>
      <div class="main">
        <el-form ref="createList" :model="createList" :rules="createListRules" auto-complete="on" label-position="left">
          <div class="tab">
            <div class="row">
              <label>问题单类型</label>
              <el-form-item prop="type">
                <el-select
                  v-model="createList.type"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in typeStatusList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="row">
              <label>位置描述</label>
              <el-form-item prop="location">
                <el-input
                  v-model="createList.location"
                  type="textarea"
                  resize="none"
                  :rows="3"
                  placeholder="请输入"
                  name="location"
                  maxlength="500"
                  tabindex="1"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
          </div>
          <div class="tab">
            <div class="row">
              <label>检查内容</label>
              <el-form-item prop="content">
                <el-input
                  v-model="createList.content"
                  type="textarea"
                  resize="none"
                  :rows="4"
                  placeholder="请输入"
                  name="content"
                  maxlength="500"
                  tabindex="2"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
          </div>
          <div class="tab">
            <div class="row">
              <label>整改人</label>
              <el-form-item prop="rectifyPerson">
                <el-select
                  v-model="createList.rectifyPerson"
                  filterable
                  placeholder="请选择"
                  @change="selectChanged"
                >
                  <el-option
                    v-for="item in userList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="row">
              <label>整改时间</label>
              <el-form-item prop="dataTime">
                <div class="block">
                  <!-- <el-date-picker
                    v-model="createList.rectifyAt"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  /> -->
                  <el-date-picker
                    v-model="createList.dataTime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </div>
              </el-form-item>
            </div>
            <div class="row" style="margin: 32px 0 0 40px;">
              <label>是否提供短信</label>
              <el-switch
                v-model="createList.sendSms"
                active-text="是"
                inactive-text="否"
                active-color="#F7B500"
                inactive-color="#00316C"
                active-value="true"
                inactive-value="false"
              />
            </div>
          </div>

          <div class="tab">
            <div class="imgtitle">
              <label>上传照片</label>
              <div style="margin: 20px 0 0 0;">
                <el-form-item>
                  <el-upload
                    ref="upload"
                    :action="pathUrl+'/file/img'"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>
              </div>
            </div>
          </div>

          <div class="btnsubmit">
            <el-button
              type="primary"
              class="create"
              @click.native.prevent="submitData"
            >创建</el-button>
            <el-button
              type="primary"
              class="cancel"
              @click="comeBack"
            >取消</el-button>
          </div>

        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
import { createInspect, getInspectType } from '@/api/patrolExamine'
import { getUserList } from '@/api/user'
import { deleteFiles } from '@/api/file'

export default {
  name: 'CreatePatrol',
  components: {
  },
  data() {
    return {
      pathUrl: process.env.VUE_APP_BASE_API,
      createList: {
        type: '',
        location: '',
        content: '',
        rectifyPerson: '',
        rectifyPersonName: '',
        acceptTime: '',
        rectifyEndAt: '',
        files: [],
        dataTime: [],
        sendSms: false
      },
      // 上传图片
      imagerType: ['image/jpeg', 'image/gif', 'image/bmp', 'image/png', 'image/jpg'],
      createListRules: {
        type: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        location: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        rectifyPerson: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        dataTime: [
          { required: true, message: '必填', trigger: 'change' }
        ]
      },
      loading: false,
      getSubmitData: false,
      dialogImageUrl: '',
      dialogVisible: false,
      typeStatusList: [
        // { type: 'quality', name: '质量问题' },
        // { type: 'security', name: '安全问题' }
      ],
      userList: []
    }
  },
  computed: {

  },
  mounted() {
    this.getList()
    this.getInspectType()
  },
  methods: {
    // 问题单类型
    async getInspectType() {
      const res = await getInspectType()
      if (res.code === 200) {
        this.typeStatusList = res.data
      } else {
        this.$message({
          message: '问题单类型查询出错!',
          type: 'error',
          showClose: true,
          duration: 2 * 1000
        })
      }
    },
    // 获取用户信息
    async getList() {
      const res = await getUserList()
      if (res.code === 200) {
        this.userList = res.data
      }
    },
    comeBack() {
      this.$router.go(-1)
    },
    selectChanged(value) {
      for (let i = 0; i < this.userList.length; i++) {
        if (this.userList[i].id === value) {
          this.createList.rectifyPersonName = this.userList[i].name
        }
      }
    },
    // 图片上传
    handleAvatarSuccess(res, file, fileList) {
      // this.createList.progressNodeList[index].imageUrl = URL.createObjectURL(file.raw)
      if (res.code === 200) {
        this.createList.files.push(res.data)
      } else {
        this.$refs.upload.clearFiles()
        this.$message({
          type: 'error',
          message: res.msg || 'error',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
    },
    beforeAvatarUpload(file) {
      // eslint-disable-next-line no-unneeded-ternary
      const isJPG = this.imagerType.indexOf(file.type) !== -1
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message({
          type: 'error',
          message: '上传头像图片只能是 JPG,JPEG,PNG,GIF 格式!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
      if (!isLt10M) {
        this.$message({
          type: 'error',
          message: '上传图片大小不能超过 10MB!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
      return isJPG && isLt10M
    },
    async handleRemove(file, fileList) {
      const id = file.response.data.id
      const res = await deleteFiles(id)
      if (res.code === 200) {
        this.createList.files.splice(this.createList.files.findIndex(item => item.id === id), 1)
        this.$message({
          type: 'success',
          message: '图片删除成功!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      } else {
        console.log('图片删除失败!')
      }
      // console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    submitData() {
      this.$refs.createList.validate(valid => {
        if (valid) {
          this.loading = true
          this.createList.acceptTime = this.createList.dataTime[0]
          this.createList.rectifyEndAt = this.createList.dataTime[1]
          if (this.createList.sendSms === 'false') {
            this.createList.sendSms = false
          } else {
            this.createList.sendSms = true
          }
          createInspect(this.createList).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '创建成功!',
                showClose: true,
                center: true,
                duration: 2 * 1000
              })
              this.$router.push('patrolExamine')
            } else {
              this.$message({
                type: 'error',
                message: res.msg || 'error',
                showClose: true,
                center: true,
                duration: 2 * 1000
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$color:rgba(247,181,0,1);
  .app-wrapper{
    .content{
      width: 98%;
      min-height: 700px;
      background: rgba(37,38,47,1);
      margin: 20px auto 0 auto;
      .title{
        padding: 30px 0 20px 34px;
        font-size:20px;
        font-weight:500;
        color:rgba(247,181,0,1);
      }
      .main{
        margin: 24px 128px 0 41px;
        padding-bottom: 25px;
        .tab{
          display: flex;
          margin-bottom: 20px;
          .row{
            flex: 1;
            margin-right: 30px;
            .el-form-item{
              width: 350px;
            }
            label{
              font-size:14px;
              font-weight:400;
              color:rgba(247,181,0,0.8);
           }
           .el-input{
              margin: 8px 0 0 0;
           }
           .el-textarea{
             margin: 8px 0 0 0;
             background: transparent;
           }
           .el-select{
              display: block;
              margin: 8px 0 0 0;
           }
           .block{
             margin: 8px 0 0 0;
           }
          }
        }
      }
      .btnsubmit{
        text-align: center;
        margin-top: 60px;
        .create{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,1);
          width:60px;
          height:32px;
          margin-right: 5px;
          background:#F7B500;
        }
        .cancel{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,0.8);
          width:60px;
          height:32px;
          background:#F7B500;
          opacity:0.4;
        }
      }
    }
  }
  .imgtitle{
    font-size: 14px;
    font-weight: 400;
    color: rgba(247,181,0,.8);
  }
</style>
